<!-- 享受政策 -->
<template>
  <div>
    <el-card v-if="show == 'table'">
      <el-row :gutter="4">
        <el-form :inline="true" label-position="left" label-width="100px">
          <el-form-item>
            <el-input
              v-model="searchDto.keywords"
              placeholder="请输入姓名"
              style="width:250px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="searchDto.type" placeholder="请选择政策类别">
              <el-option
                v-for="item in getDictionary('PERSON_WEAL')"
                :key="item.keyword"
                :label="item.label"
                :value="item.keyword"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="searchDto.year"
              type="year"
              placeholder="选择享受福利年份"
              value-format="yyyy"
            />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="search">
              查询
            </el-button>
            <el-button icon="el-icon-s-open" type="primary" @click="clear">
              重置
            </el-button>
            <el-button
              icon="el-icon-upload2"
              type="success"
              :loading="loading"
              @click="exportEnjoymentPolicy()"
            >导出
            </el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <page-table
        ref="multipleSelection"
        :page-data="pageData"
        :loading="loading"
        rowKey="wealId"
        height="64vh"
        :do-get-page-data="getPageData"
      >
        <el-table-column
          prop="userId"
          label="编号"
          align="center"
          width="80px"
        />
        <el-table-column prop="name" label="姓名" align="center" width="120" />
        <el-table-column prop="sex" label="性别" align="center" width="80" />
        <el-table-column prop="nation" label="民族" align="center" width="100" />
        <el-table-column
          prop="disabledCard"
          label="残疾证号"
          align="center"
          width="220"
          show-overflow-tooltip
        />
        <el-table-column label="残疾类别" align="center"  width="120">
          <template slot-scope="scope">
            {{ scope.row.disabledType | setType(getDictionary("DIS_TYPE")) }}
          </template
          >
        </el-table-column>
        <el-table-column label="残疾等级" align="center"  width="120">
          <template slot-scope="scope">
            {{ scope.row.disabledLevel | keyText("DIS_LEVEL") }}
          </template>
        </el-table-column>
        <el-table-column prop="wealName" label="政策名称" align="center" width="220" />

        <el-table-column prop="type" label="政策类别" align="center"  width="140">
          <template slot-scope="scope">
            {{ scope.row.type | keyText("PERSON_WEAL") }}
          </template>
        </el-table-column>
        <el-table-column prop="content" label="政策内容" align="center" width="300" />
        <el-table-column prop="disabledCardDate" label="办证时间" align="center"  width="150"/>
        <el-table-column prop="wealTime" label="享受时间" align="center"  width="150"/>
        <el-table-column label="管理" align="center" fixed="right" width="80">
          <template slot-scope="scope">
            <el-tooltip content="详情" placement="top">
              <el-button
                type="button"
                size="mini"
                icon="el-icon-search"
                @click="view(scope.row)"
              >
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </page-table>
    </el-card>
    <infos v-if="show == 'info'" :disInfo="disInfo" active="sixth" />
  </div>
</template>
<script>
import infos from "./manageInfo.vue";

export default {
  name: 'EnjoymentPolicy',
  components: { infos },
  data() {
    return {
      searchDto: {
        pageIndex: 1,
        pageSize: 10,
        keywords: null,
        type: null,
        year: null,
      },
      pageData: {},
      loading: false,
      show: "table",
      disInfo: {},
    }
  },
  filters: {
    setType(val, ts) {
      ts.map(i => {
        if (val.indexOf(i.keyword) > -1) {
          val = val.replace(i.keyword, i.label);
        }
      });
      return val;
    }
  },
  methods: {
    view({ id }) {
      this.API.getDisabledPersonById({ id }).then(async ret => {
        this.disInfo = await ret.data;
        this.show = "info";
      });
    },
    search() {
      this.getPageData({ pageIndex: 1 });
    },
    clear() {
      this.searchDto = {
        pageIndex: 1,
        pageSize: 10,
        keywords: null,
        type: null,
        year: null,
      };
      this.getPageData();
    },
    // 获取分页数据
    async getPageData(val) {
      let tem = Object.assign(this.searchDto, val);
      const { data } = await this.API.getAllDisabledPersonWealPageList(tem)
      this.pageData = data;
    },
    // 导出
    async exportEnjoymentPolicy() {
      try {
        this.loading = true
        let fileDownload = require("js-file-download");
        const { data, headers } =
          await this.ExportApi.exportDisabledPersonWealExcel(this.searchDto)
        const fileName = this.getFileName(headers["content-disposition"]);
        fileDownload(data, fileName);
        this.success('导出成功')
      } finally {
        this.loading = false
      }
    },
  },
  created() {
    this.getPageData();
  }
}
</script>
